<template>
	<div class="changeUserPassword">
		<div class="mainContent">
			<div class="logoBox">
				<img src="../../assets/icon/changeUserPasswordIcon.png" alt="" />
			</div>
			<div class="formBox">
				<div class="title">修改密码</div>
				<div class="mainForm">
					<!-- <div class="formRowInfo">
						<span class="titleSpan">旧密码</span>
						<span class="textSpan">
							<wj-Input placeholder="请输入账户密码" type="password" :showPassword="true" v-model="oldPwd" label-width="120px" v-validate="'required|pwd'">
								<i class="wj-icon-icon2"></i>
							</wj-Input>
						</span>
					</div> -->
					<div class="formRowInfo">
						<span class="titleSpan">新密码</span>
						<span class="textSpan">
							<wj-Input
								placeholder="请输入新账户密码"
								type="password"
								:showPassword="true"
								v-model="newPwd"
								label-width="120px"
								v-validate="'required|pwd'"
							>
								<i class="wj-icon-icon2"></i>
							</wj-Input>
						</span>
					</div>
					<div class="formRowInfo">
						<span class="titleSpan">确认新密码</span>
						<span class="textSpan">
							<wj-Input
								placeholder="请确认新账户密码"
								type="password"
								:showPassword="true"
								v-model="affirmNewPwd"
								label-width="120px"
								v-validate="'required|pwd'"
							>
								<i class="wj-icon-icon2"></i>
							</wj-Input>
						</span>
					</div>
				</div>
				<div class="btns">
					<wj-Button type="info" @click="backPrev">返回</wj-Button>
					<wj-Button type="middlestate" v-checksubmit="submitLicence">提交</wj-Button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { system_user_updata } from "@/utils/request/api.js";
export default {
	name: "ChangeUserPassword",
	data() {
		return {
			// oldPwd: "", // 旧密码
			newPwd: "", // 新密码
			affirmNewPwd: "", // 确认新密码
			userId: "", // 用户id
		};
	},
	created() {},
	mounted() {
		this.userId = localStorage.getItem("employeeId");
	},
	methods: {
		// 返回
		backPrev() {
			history.go(-1);
		},
		// 提交
		submitLicence() {
			if (this.newPwd !== this.affirmNewPwd) {
				this.$msg.warning("两次输入密码不同！");
			} else {
				system_user_updata({
					id: this.userId,
          password: this.newPwd,
          ordPassword: '1', // 区分用户处修改密码和header处修改密码，默认无这个参数，1表示header处修改密码。
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("密码修改成功，请重新登录！");
						this.$store.commit("set_token", null);
						localStorage.clear();
						setTimeout(() => {
							this.$router.push(
								{ name: "Login" },
								(onComplete) => {
									console.log(onComplete);
								},
								(onabort) => {
									console.log(onabort);
								}
							);
						}, 1000);
					} else {
						this.$msg.error("密码修改失败！");
					}
				});
			}
		},
	},
};
</script>
<style lang="less" scoped>
.changeUserPassword {
	width: 100%;
	height: 100%;
	background-image: url("../../assets/icon/backgroundChangeUserPassword1.png");
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.mainContent {
		width: 800px;
		max-width: 60%;
		/*height: 398px;*/
		height: 318px;
		background: #eeeeee;
		border-radius: 12px;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.logoBox {
			width: 40%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			img {
				width: 128px;
				height: 128px;
			}
		}

		.formBox {
			width: 60%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			.title {
				width: 90%;
				font-size: 24px;
				font-weight: 600;
				text-align: right;
				margin: 18px auto;
			}
			.mainForm {
				width: 100%;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.formRowInfo {
					width: 80%;
					height: 48px;
					margin-bottom: 12px;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					span {
						display: inline-block;
						font-size: 16px;
					}
					span.titleSpan {
						width: 120px;
						height: 48px;
						line-height: 48px;
						color: #606266;
						font-weight: 600;
						margin-right: 18px;
					}
					span.textSpan {
						width: calc(100% - 120px - 18px);
						height: 48px;
						line-height: 48px;
						/deep/ .x_input .x_input_inner {
							margin-left: 0 !important;
							height: 42px;
							line-height: 42px;
							padding: 3px 15px 0 52px;
						}
						/deep/ .tip_msg {
							top: 28px;
						}
						/deep/ [class*="wj-icon"] {
							font-size: 18px;
						}
					}
				}
			}
			.btns {
				width: 100%;
				height: 68px;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				[class*="wj-button-"] {
					font-size: 14px;
					padding: 8px 18px;
					margin: 0 12px;
				}
			}
		}
	}
}
</style>
